import React, { useState, useEffect } from "react";
import axios from "axios";
import {
  Table,
  Tag,
  Space,
  Button,
  Modal,
  message,
  Popover,
  Switch,
} from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";

const { confirm } = Modal;

export default function RightList() {
  const [dataSource, setDataSource] = useState();
  useEffect(() => {
    fetchDate();
  }, []);

  const fetchDate = async () => {
    const { data } = await axios.get("/rights?_embed=children");
    console.log(data);
    setDataSource(data);
  };

  // 修改
  const [loading, setLoading] = useState(false);
  const switchChange = async (item) => {
    setLoading(true);
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1;
    let res = {};
    if (item.grade === 1) {
      res = await await axios.patch(`/rights/${item.id}`, {
        pagepermisson: item.pagepermisson,
      });
    } else {
      res = await await axios.patch(`/children/${item.id}`, {
        pagepermisson: item.pagepermisson,
      });
    }
    if (res.status === 200) {
      setDataSource([...dataSource]);
      setLoading(false);
    }
  };

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "权限名称",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "权限路径",
      dataIndex: "key",
      key: "key",
      render: (key) => (
        <Tag color={"geekblue"} key={key}>
          {key}
        </Tag>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (item) => (
        <Space size="middle">
          <Popover
            content={
              <div>
                是否启用：
                <Switch
                  loading={loading}
                  onChange={() => switchChange(item)}
                  checked={item.pagepermisson === 1}
                ></Switch>
              </div>
            }
            title="编辑"
            trigger={item.pagepermisson === undefined ? "" : "click"}
          >
            <Button
              type="primary"
              size="small"
              ghost
              disabled={item.pagepermisson === undefined}
            >
              编辑
            </Button>
          </Popover>
          <Button
            type="primary"
            size="small"
            danger
            ghost
            onClick={() => {
              delConfirm(item);
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  // 删除
  const deleteMethod = (item) => {
    console.log(item);
    const fetchDdlDate = async () => {
      const res = await axios.delete(`/rights/${item.id}`);
      if (res.status === 200) {
        fetchDate();
        message.success("删除成功");
      }
    };
    fetchDdlDate();
  };

  const delConfirm = (item) => {
    confirm({
      title: "提示",
      icon: <ExclamationCircleOutlined />,
      content: "确定要删除吗？",
      onOk() {
        console.log("OK");
        deleteMethod(item);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  return (
    <div>
      <Table
        bordered
        dataSource={dataSource}
        columns={columns}
        pagination={{ pageSize: 10 }}
        size="small"
      />
    </div>
  );
}
